<template>
	<view class="cell">
		<view v-for="(component, index2) in components" :key="index2" style="margin-left: 5px;">
			<view class="uni-list-cell" style="margin-top: 5%;">
				<view class="uni-list-cell-db">
					<text style="line-height: 100rpx;color: red;">选择上报类型:</text>
					<picker
						style="line-height: 100rpx;color: #BEBEBE;font-size: 32rpx; padding-left: 250px;margin-top: -50px;padding-top: -100px;"
						@change="pick($event,index2)" mode='selector' disabled :value="components[index2].index"
						:range="components[index2].array" class='listPicker'>
						<view>{{ reportType }}</view>
					</picker>
				</view>
			</view>
			<view style="margin-top: 20px;">
				<view>
					<view>品名：</view>
					<view>
						<input maxlength="20" placeholder="请输入品名" style="border: 1px solid rgba(0, 0, 0, 0.1);
		  					width: 200px;
		  					margin-top: -20px;
		  					margin-left: 50px;" v-model="productName" disabled @blur="inputProductName($event,index2)" />
					</view>
				</view>
			</view>
			<view style="margin-top: 20px;" v-if="components[index2].Hidden == false">
				<view>
					<view>规格型号：</view>
					<view>
						<input maxlength="20" placeholder="请输入规格型号" style="border: 1px solid rgba(0, 0, 0, 0.1);
							width: 200px;
							margin-top: -20px;
							margin-left: 80px;" v-model="materialModel" disabled @blur="inputModel($event,index2)" />
					</view>
				</view>
			</view>
			<view class="cell-left" style="margin-top: 20px;">
				<view class="cell-text">申请理由：</view>
			</view>
			<view class="cell-left" style="margin-left: 30px;">
				<view class="cell-text">
					<Textarea v-model="contentText" ref="content" style="border: 1px solid #ccc;" disabled :len='200'>
				</Textarea>
				</view>
			</view>
			<view style="margin-top: 20px;" v-if="components[index2].Hidden">
				<view>
					<view>金额：</view>
					<view>
						<input type="number" maxlength="20" placeholder="请输入金额" style="border: 1px solid rgba(0, 0, 0, 0.1);
								width: 200px;
								margin-top: -20px;
								margin-left: 50px;" disabled v-model="materialPrice" @blur="input($event,index2)" />
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<!--组件位置-->
			<mianBan :list='list' @upload="upload"></mianBan>
		</view>
		<view style="margin-top: 20px;" v-if="reason != '' && reason != null">
			<view class="cell-left" style="margin-top: 20px;">
				<view class="cell-text">驳回理由：</view>
			</view>
			<view class="cell-left" style="margin-left: 30px;">
				<view class="cell-text">
					<Textarea v-model="reason" ref="content" style="border: 1px solid #ccc;" disabled :len='200'>
						</Textarea>
				</view>
			</view>
		</view>
		<!-- <view class="button"><button @click="onsubmit">提交</button></view> -->
	</view>
</template>

<script>
	// 导入并注册
	import dragButton from "@/components/drag-button/drag-button.vue";
	import dragButton1 from "@/components/drag-button/drag-button1.vue";
	import mianBan from '@/components/mianBan.vue';
	import amap from '@/static/js/amap-wx.130.js';
	export default {
		data() {
			return {
				reason: '',
				contentText: '',
				productName: '',
				reportType: '',
				materialcodeList: [],
				item: null,
				amapPlugin: null,
				gaodekey: 'a65ca3f7e4c4cf0f17d64768ce74a85e', //高德key,此处的key需要去高德平台申请获取，此key是假的！！！
				address: "", // 已经获取到的位置
				components: [],
				workOrderNumber: '',
				materialName: '',
				materialModel: '',
				materialPrice: '',
				approvalStatus: '完成',
				approvalStatus1: '完成',
				approvalStatus2: '未完成',
				date: new Date().toISOString(),
				list: [{
					name: '审批未通过',
					ishow: false,
					list: [],
				}]
			}
		},

		components: {
			mianBan,
			dragButton,
			dragButton1
		},
		mounted() {
			let _this = this;
			setInterval(function() {
				_this.date = Date.parse(new Date());
			}, 1000);
		},
		onLoad(option) {
			console.log("进来了")
			this.item = JSON.parse(option.item)
			console.log(this.item.pickingreason)
			this.components.push({
				reportType: '',
				contentText: '',
				model: '',
				productName: '',
				price: 0,
				imageData: '',
				selectedOption: '',
				array: ['本地采购', '公司寄件'],
				name: '',
				index: 0,
				matchMedia: '',
				Hidden: true,
			});
			this.reportType = this.item.pickingtype
			this.contentText = this.item.pickingreason
			this.productName = this.item.materialname
			this.materialModel = this.item.materialmodel
			this.materialPrice = this.item.materialprice
			this.reason = this.item.reason
			if (this.item.pickingtype == '本地采购') {
				this.components[0].Hidden = true
			} else {
				this.components[0].Hidden = false
			}

			this.list[0].name = this.item.pickingstatus
			this.list[0].ishow = this.item.pickingstatus == '审批已通过'
			this.list[0].list.push({
				time: this.item.applicationtime,
				name1: "发起人",
				main: this.item.dispatchedPersonnel,
				succes: false
			})
			this.list[0].list.push({
				time: this.item.applicationtime,
				name1: "审批人员",
				main: this.item.department + "," + this.item.technology + "," + this.item.procure,
				succes: false
			})
			this.list[0].list.push({
				time: this.item.applicationtime,
				name1: "审批待审批人员",
				main: "",
				succes: false
			})
			this.list[0].list.push({
				time: this.item.applicationtime,
				name1: "审批通过人员",
				main: "",
				succes: true
			})
			this.list[0].list.push({
				time: this.item.applicationtime,
				name1: "审批已驳回人员",
				main: "",
				succes: false
			})
			var shentong = ''
			var daitong = ''
			var botong = ''
			//已通过
			if (this.item.departmentapproval == "已通过") {
				shentong += this.item.department + "  "
			}
			if (this.item.technologyapproval == "已通过") {
				shentong += this.item.technology + "  "
			}
			if (this.item.procureapproval == "已通过") {
				shentong += this.item.procure + "  "
			}
			//待审批
			if (this.item.departmentapproval == "待审批") {
				daitong += this.item.department + "  "
			}
			if (this.item.technologyapproval == "待审批") {
				daitong += this.item.technology + "  "
			}
			if (this.item.procureapproval == "待审批") {
				daitong += this.item.procure + "  "
			}

			if (this.item.departmentapproval == "已驳回") {
				botong += this.item.department + "  "
			}
			if (this.item.technologyapproval == "已驳回") {
				botong += this.item.technology + "  "
			}
			if (this.item.procureapproval == "已驳回") {
				botong += this.item.procure + "  "
			}
			console.log(daitong + "---" + shentong + "---------" + botong)
			if (this.item.procureapproval == "已驳回" || this.item.departmentapproval == "已驳回" || this.item
				.technologyapproval == "已驳回") {
				this.list[0].list[4].succes = true
			} else {
				if (this.item.procureapproval == "待审批" || this.item.departmentapproval == "待审批" || this.item
					.technologyapproval == "待审批") {
					this.list[0].list[2].succes = true
				} else {
					this.list[0].list[3].succes = true
				}
			}
			this.list[0].list[2].main = daitong
			this.list[0].list[3].main = shentong
			this.list[0].list[4].main = botong
		},

		methods: {
			upload(item, i) {
				/* 打开一个关闭另外一个
				这里逻辑如果不同请自行修改 */
				this.list.forEach((val, index) => {
					if (i == index) {
						val.ishow = true
					} else {
						val.ishow = false
					}
				})
			},

		}
	}
</script>

<style lang="less">
	page {
		background-color: #F8F8F8;
	}

	.button {
		margin-top: 120rpx;

		button {
			background-color: #11c53e;
			width: 90%;
			height: 85rpx;
			text-align: center;
			line-height: 85rpx;
			color: #fff;
		}
	}

	.color1 {
		color: #55ff7f;
	}

	.color2 {
		color: red;
	}
</style>